<template>
    <div class="comment-container">
        <h3>发表评论</h3>
        <div style="border-top: 1px solid lightgray">
            <textarea placeholder="请输入要评论的内容（最多120字）" maxlength="120"></textarea>
            <mt-button type="primary" size="large">发表评论</mt-button>
            <div class="comment-list" v-for="(item,i) in commentsList" :key="item.id">
                <div class="comment-list-item">
                    <div class="comment-list-item-title">
                        <span>#{{++i}}楼</span> <span>匿名用户</span>
                    </div>
                    <div class="comment-list-item-content">
                        {{item.content === "" ? "这个用户很懒，什么都没说" : item.content }}
                    </div>
                    <div class="comment-list-item-date">
                        <span>{{item.time}}</span>

                    </div>
                </div>
            </div>
            <mt-button type="default" size="large" plain>加载更多</mt-button>
        </div>

    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    export default {
        name: "comment",
        data(){
            return {
                commentsList:[],
                pageIndex:1   //默认展示第一页数据
            }
        },
        created(){
            this.getComments()
        },
        methods:{
            getComments(){
                // +this.id+'?pageIndex='+this.pageIndex
                this.$http.get('./src/data/'+this.id+'/comment.json').then(result => {
                    if (result.body.status === "E0") {
                        this.commentsList = result.body.data;
                    }else{
                        Toast( result.body.message);
                    }
                });
            }
        },
        props:['id']
    }
</script>

<style lang="scss" scoped>

    .comment-container {
        h3 {
            font-size: 18px;
        }
        textarea {
            margin-top: 10px;
            font-size: 14px;
            height: 85px;
            margin-bottom: 0;
        }
        .comment-list {
            border: 1px solid lightgray;
            margin: 10px auto;
            border-radius: 5px;
            .comment-list-item {
                font-size: 12px;
                padding-left: 10px;

                .comment-list-item-title {
                    height: 30px;
                    line-height: 30px;
                }
                .comment-list-item-content {
                    font-size: 13px;
                    color: gray;
                    text-indent: 2em;
                }
                .comment-list-item-date {
                    color: lightgray;
                    text-align: right;
                    padding-right: 10px;
                }
            }
        }

    }
</style>